<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/login.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/jquery.form.js" charset="UTF-8"></script>
	<script src="js/common.js"></script>
	<script type="text/javascript" src="js/plugins/vue/dist/vue.js"></script>
	<script type="text/javascript" src="js/plugins/axios/dist/axios.js"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/login.js" charset="UTF-8"></script>
	<title>XXX - 登录 / 注册</title>
	<script src="js/jquery.js"></script>

</head>
<body>
	<div class="public-head-layout container">
		<a class="logo" href="index.html"><img src="images/icons/logo.png" alt="XXX" class="cover"></a>
	</div>
	<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
		<div class="login-layout container">
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>欢迎登录XXX平台</h2>
				</div>
				<div class="tabs_container">
					<form class="tabs_form" action="" method="post" id="login_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone" v-model="formParams.mobile"  name="phone" id="login_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" v-model="formParams.password" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        	<input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
	                        </label>
	                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="login_error">
								<!-- 错误信息 范例html
								<div class="alert alert-warning alert-dismissible fade in" role="alert">
									<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<strong>密码错误</strong> 请重新输入密码
								</div>
								 -->
							</div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">登录</button><br>
	                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">登录成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<div class="form-box register" >
  				<div class="tabs-nav">
  					<h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container" id="myApp">
					<form class="tabs_form" action="index.html" method="post" id="register_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone"  v-model="formParams.mobile"  name="phone" id="register_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<input  v-model="formParams.imageCode" type="text" id="captcha" class="input-small" name="MobileRegisterModel[captcha]">
							<label class="captcha">
								<img id="captcha-image-temp" @click="getImageCode"
									 class="captcha-image-temp" :src="imageCode" alt="点击换图" title="点击换图" style="vertical-align: middle; cursor: pointer;">
							</label>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input class="form-control" v-model="formParams.smsCode" name="smscode" id="register_sms" placeholder="输入验证码" type="text">
								<span class="input-group-btn">
									<button type="button" class="btn btn-primary getsms" @click="sendSmsCode"type="button">发送短信验证码</button>
								</span>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" v-model="formParams.password" id="register_pwd" placeholder="请输入密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></div>
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        	<input checked="" id="register_checkbox" type="checkbox"><i></i> 同意<a href="temp_article/udai_article3.html">XXX用户协议</a>
	                        </label>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="register_error"></div>
						</div>
	                    <button type="button" class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit"  @click="submitRegister" type="button">注册</button>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">注册成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<div class="form-box resetpwd">
  				<div class="tabs-nav clearfix">
  					<h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form" action="https://rpg.blue/member.php?mod=logging&action=login" method="post" id="resetpwd_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
								</div>
								<input class="form-control phone"  v-model="formParams.mobile"  name="phone" id="resetpwd_phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<input  v-model="formParams.imageCode" type="text" class="input-small" name="MobileRegisterModel[captcha]">
							<label class="captcha">
								<img  @click="getImageCode"
									 class="captcha-image-temp" :src="imageCode" alt="点击换图" title="点击换图" style="vertical-align: middle; cursor: pointer;">
							</label>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input class="form-control" name="sms"  v-model="formParams.smsCode" id="resetpwd_sms" placeholder="输入验证码" type="text">
								<span class="input-group-btn">
									<button class="btn btn-primary getsms"   @click="sendSmsCode"type="button">发送短信验证码</button>
								</span>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
								</div>
								<input class="form-control password" name="password" v-model="formParams.password" id="resetpwd_pwd" placeholder="新的密码" autocomplete="off" type="password">
								<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
							</div>
						</div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="resetpwd_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit" type="button">重置密码</button>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">密码重置成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<script>
				$(document).ready(function() {
					// 判断直接进入哪个页面 例如 login.php?p=register
					switch($.getUrlParam('p')) {
						case 'register': $('.register').show(); break;
						case 'resetpwd': $('.resetpwd').show(); break;
						default: $('.login').show();
					};
					// 发送验证码事件
					$('.getsms').click(function() {
						var phone = $(this).parents('form').find('input.phone');
						var error = $(this).parents('form').find('.error_msg');
						switch(phone.validatemobile()) {
							case 0:
								// 短信验证码的php请求
								error.html(msgtemp('验证码 <strong>已发送</strong>','alert-success'));
								// $(this).rewire(60);
							break;
							case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); break;
							case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); break;
							case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); break;
						}
					});
					// 以下确定按钮仅供参考
					$('.submit').click(function() {
						var form = $(this).parents('form')
						var phone = form.find('input.phone');
						var pwd = form.find('input.password');
						var error = form.find('.error_msg');
						var success = form.siblings('.tabs_div');
						var options = {
							beforeSubmit: function () {
								console.log('喵喵喵')
							},
							success: function (data) {
								console.log(data)
							}
						}
						// 验证手机号参考这个
						switch(phone.validatemobile()) {
							case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); return; break;
							case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); return; break;
							case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); return; break;
						}
						// 验证密码复杂度参考这个
						switch(pwd.validatepwd()) {
							case 1: error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码',    'alert-warning')); return; break;
							case 2: error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码','alert-warning')); return; break;
							case 3: error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合',  'alert-warning')); return; break;
						}
						form.ajaxForm(options);
						请求成功执行类似这样的事件
						form.fadeOut(150,function() {
							success.fadeIn(150);
						});
					})
				});
			</script>
			<script type="text/javascript">
				$().ready(function() {
					new Vue({
						el:"#myApp",
						data(){
							return {
								imageCodePrefix:"data:image/jpg;base64,",
								imageCode:'',
								formParams:{
									mobile:'18244444444',
									password:'123456',
									imageCode:'',
									smsCode:'',
									regChannel:1
								}
							}
						},
						methods:{
							createUuid(){
								var s = [];
								var hexDigits = "0123456789abcdefghi";
								for (var i = 0; i < 36; i++) {
									s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
								}
								s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
								s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
								s[8] = s[13] = s[18] = s[23] = "-";

								var uuid = s.join("");
								return uuid;
							},
							getImageCode(){
								//发送请求到后台获取数据  VerifycodeController
								let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
								if(!imageCodeKey || imageCodeKey === ''){
									imageCodeKey = this.createUuid();
									sessionStorage.setItem("registerImageCodeKey",imageCodeKey);
								}
								this.$http.get("/common/verifycode/imageCode/"+imageCodeKey).then(res=>{
									//res.data :就是base64编码后的图片的字符串
									this.imageCode = this.imageCodePrefix+res.data.resultObj;
								})
							},
							submitRegister(){
								//4.发送ajax请求
								this.$http.post("/user/user/register",this.formParams).then(res=>{
									var ajaxResult = res.data;
									if(ajaxResult.success){
										alert("注册成功");
										// $.alert("注册成功");
										window.location.href = "http://127.0.0.1:80/login.html";
									}else{
										alert("发送失败:"+ajaxResult.message);
										// $.alert("发送失败:"+ajaxResult.message);
									}
								})
							},
							sendSmsCode(event){
								//1.判断手机号不为空
								if(!this.formParams.mobile){
									alert("手机号不能为空");
									// $.alert("手机号不能为空");
									return;
								}

								//2.判断图片验证码不为空
								if(!this.formParams.imageCode){
									alert("图片验证码不能为空");
									// $.alert("图片验证码不能为空");
									return;
								}

								//3.获取按钮，禁用按钮
								var sendBtn = $(event.target);
								sendBtn.attr("disabled",true);

								var param = {
									mobile: this.formParams.mobile,
									imageCode:this.formParams.imageCode,
									imageCodeKey:sessionStorage.getItem("registerImageCodeKey")
								};


								//4.发送ajax请求
								this.$http.post("/common/verifycode/sendSmsCode",param).then(res=>{
									var ajaxResult = res.data;
									if(ajaxResult.success){
										alert("手机验证码已经发送到您的手机，请在10分钟内使用");
										// $.alert("手机验证码已经发送到您的手机，请在10分钟内使用");
										//4.1.发送成：倒计时 60秒
										var time = 60;

										var interval = window.setInterval( function () {
											//每一条倒计时减一
											time = time - 1 ;

											//把倒计时时间搞到按钮上
											sendBtn.html(time+"秒后重发");

											//4.2.倒计时完成恢复按钮
											if(time <= 0){
												sendBtn.html("重新发送");
												sendBtn.attr("disabled",false);
												//清除定时器
												window.clearInterval(interval);
											}
										},1000);
									}else{
										//4.3.发送失败：提示，恢复按钮
										sendBtn.attr("disabled",false);
										alert("发送失败:"+ajaxResult.message)
										// $.alert("发送失败:"+ajaxResult.message);
									}
								}).catch(error => {
									//4.3.发送失败：提示，恢复按钮
									sendBtn.attr("disabled",false);
									alert("发送失败:"+error.message)
									// $.alert("发送失败:"+error.message);
								})
							}
						}
						,
						mounted(){
							this.getImageCode();
						}
					});


					$(".user_protocol").click(function() {
						if($.modal($(this))) {
							$.modal($(this)).show();
						} else {
							var modal = $.modal({
								title: "用户注册协议",
								trigger: $(this),
								content: $("#user_protocol").html()
							});
							modal.addButton({
								text: "同意协议并继续",
								click: function() {
									$("input[type='checkbox']").prop("checked", true);
									$("#btn_submit").removeAttr("disabled");
									this.hide();
								}
							});
						}
					});
				});
			</script>
		</div>
	</div>
	<div class="footer-login container clearfix">
		<ul class="links">
			<a href=""><li>网店代销</li></a>
			<a href=""><li>U袋学堂</li></a>
			<a href=""><li>联系我们</li></a>
			<a href=""><li>企业简介</li></a>
			<a href=""><li>新手上路</li></a>
		</ul>
		<!-- 版权 -->
		<p class="copyright">
			© 2005-2017 XXX 版权所有，并保留所有权利<br>
			ICP备案证书号：闽ICP备XXX号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市XXX&nbsp;&nbsp;&nbsp;&nbsp;Tel: XXX&nbsp;&nbsp;&nbsp;&nbsp;E-mail: XXX@qq.com
		</p>
	</div>
</body>
</html>